<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <!-- <img :src="Logo" alt="logo" class="logo"> -->
        <h2>欢迎登录教师端</h2>
      </div>

      <a-form class="login-form" @submit.prevent="handleLogin">
        <a-form-item>
          <a-input v-model:value="form.username" placeholder=" " class="custom-input">
            <template #prefix>
              <UserOutlined class="input-icon" />
            </template>
            <template #label>
              <span class="float-label">账号</span>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-input-password v-model:value="form.password" placeholder=" " class="custom-input">
            <template #prefix>
              <LockOutlined class="input-icon" />
            </template>
            <template #label>
              <span class="float-label">密码</span>
            </template>
          </a-input-password>
        </a-form-item>

        <a-button type="primary" html-type="submit" class="login-btn" :loading="loading">
          {{ loading ? '登录中...' : '立即登录' }}
        </a-button>
      </a-form>
    </div>

    <div class="decorative-circle circle-1"></div>
    <div class="decorative-circle circle-2"></div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { userLoginApi } from '/@/api/user';
import { useUserStore } from "/@/store";
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';


const router = useRouter();
const userStore = useUserStore();

const form = reactive({
  username: '',
  password: ''
});
const loading = ref(false);

const handleLogin = async () => {
  if (!form.username || !form.password) {
    message.warn("请输入账号和密码");
    return;
  }
  loading.value = true;

  try {
    const result = await userLoginApi({
      username: form.username,
      password: form.password
    });

    if (result.code === 200) {
      // 持久化存储关键信息
      localStorage.setItem('user_id', result.data.id)
      localStorage.setItem('user_token', result.data.token)
      localStorage.setItem('user_name', result.data.username)

      // 更新用户状态
      userStore.$patch({
        user_id: result.data.id,
        user_name: result.data.username,
        user_token: result.data.token
      });

      // 跳转到教师端主页
      router.push({ name: 'main_th' });
    } else {
      message.error(result.message || '登录失败');
    }
  } catch (error) {
    message.error(error.response?.data?.message || '登录失败，请检查账号密码');
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="less" scoped>
@primary-color: #3d5b96;
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;

  .login-card {
    width: 420px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-2px);
    }
  }

  .login-header {
    text-align: center;
    margin-bottom: 32px;

    .logo {
      width: 80px;
      margin-bottom: 16px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    h2 {
      color: @primary-color;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  .login-form {
    .custom-input {
      height: 48px;
      border-radius: 8px;
      transition: @transition;

      &:hover {
        border-color: @primary-color !important;
      }

      &:focus-within {
        box-shadow: 0 0 0 2px fade(@primary-color, 20%);
      }
    }

    .float-label {
      position: absolute;
      left: 36px;
      top: 12px;
      color: #666;
      pointer-events: none;
      transition: @transition;
    }

    .input-icon {
      color: fade(@primary-color, 60%);
      font-size: 16px;
    }
  }

  .login-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 24px;
    letter-spacing: 2px;
    background: @primary-color;
    border: none;
    transition: @transition;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px fade(@primary-color, 30%);
    }
  }

  .decorative-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, fade(@primary-color, 10%), transparent);

    &.circle-1 {
      width: 300px;
      height: 300px;
      top: -100px;
      left: -100px;
    }

    &.circle-2 {
      width: 400px;
      height: 400px;
      bottom: -150px;
      right: -150px;
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 20px;

    .login-card {
      width: 100%;
      padding: 24px;
    }

    .decorative-circle {
      display: none;
    }
  }
}
</style>